<script>
// Fancybox 文档: https://fancyapps.com/fancybox/
import { Fancybox } from '@fancyapps/ui'
import '@fancyapps/ui/dist/fancybox/fancybox.css'
import HTBridge from '../assets/js/webViewBridgeSDK.self'

export default {
  data () {
    return {
      img1: require('../assets/pb1.jpeg'),
      slideIndex: 0, // 幻灯片定位
      slideImages: [], // 幻灯片数组
    }
  },
  methods: {
    nextClick () {
      Fancybox.next()
    },
    start (startIndex = 0, slideImages = []) {
      this.slideIndex = startIndex
      this.slideImages = slideImages
      new Fancybox(
        // 幻灯片项目数组
        // [
        //   {
        //     src: this.img1,
        //   },
        // ],
        slideImages,
        // 幻灯片参数
        {
          startIndex,
          hideScrollbar: false,
          Hash: false,
          Thumbs: false,
          Carousel: {
            Navigation: false
          },
          Toolbar: {
            items: {
              facebook: {
                tpl: `<button class="f-button"><svg><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></button>`,
                // tpl: `<button class="f-button"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12"></path></svg></button>`,
                // tpl: `<button class="f-button"><img :src="${this.img1}" width="20" height="20" alt=""></button>`,
                click: (v) => {
                  const imageUrl = this.slideImages[this.slideIndex - 1]?.['src']
                  // const hb = new HTBridge()
                  const params = { 'imageUrl': imageUrl }
                  const callback = () => {
                    alert('save success!')
                  }
                  HTBridge.saveImageToAlbum(params, callback)
                },
              },
            },
            display: {
              left: [],
              middle: [
                'infobar'
              ],
              right: ['facebook','download', 'close'],
            },
          },
          on: {
            'Carousel.ready Carousel.change': (fancybox) => {
              // Current slide
              const slide = fancybox.getSlide()
              // console.log('slide', slide.index)
              this.slideIndex = slide.index;
            }
          },
        }
      )
    },
  },
  destroyed () {
    Fancybox.destroy()
  }
}

</script>

<template>
  <div class="grid ">
<!--    <button class="getBtn" type="button" @click="nextClick">next {{ slideIndex+1 }}/{{ slideImages.length }}</button>-->
  </div>
</template>

<style scoped lang="scss">
.getBtn {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 1111;
}
</style>
